import React from 'react'
import './index.less'
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';
import { List, Button, WhiteSpace } from 'antd-mobile'
// ========================================
const Item = List.Item;
const Brief = Item.Brief;
// ========================================
class HmdMain extends React.Component {
	static contextTypes = {
	    router: PropTypes.object.isRequired
  	}
	
	jumpPage = () => {
		this.context.router.push({
			pathname: '/HmdMain/InfoStepOne'
		});
	}
    render() {
    	let _this = this;
        let listItems = [
            { title: '利率低', content: '日利率预计最低0.021%' },
            { title: '0手续费', content: '提前还款0手续费' },
            { title: '期限长', content: '最长还款周期24个月' },
        ];
        return (
            <div id="hmd">
           		<CommonHeader 
					name='信用贷'					
					leftContentTitle="@back" 
					leftContent='返回'
					rightContentTitle="我的贷款"
				/>
				<div style={{height:'.9rem'}}></div>
                <div className="hmd-card">
                    <div>预计可申请(元)</div>
                    <div className="hmd-money">20,000.00</div>
                    <div>
                        <p>线上申请&nbsp;&nbsp;秒批到账</p>
                        <p>想借就借&nbsp;&nbsp;想还就还</p>
                    </div>
                    <span className="hmd-tag">信用贷款</span>
                </div>
                <List>
                    {
                        listItems.map((item) => {
                            return (
                                <Item extra="" align="top" multipleLine
                                      thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png">
                                    {item.title}
                                    <Brief>{item.content}</Brief>
                                </Item>
                            )
                        })
                    }
                </List>
                {/*<div className="hmd-btnGroup">*/}
                    {/*<Button type="primary" className="hmd-btn" onClick={this.jumpPage.bind(this)}>马上申请</Button>*/}
                {/*</div>*/}
                <WhiteSpace size="lg" /><WhiteSpace size="lg" />
                <div className="btnGroup-one">
                    <Button type="primary" className="btnGroup-one-btn"
                            onClick={this.jumpPage.bind(this)}>马上申请</Button>
                </div>
                <WhiteSpace size="lg" /><WhiteSpace size="lg" />
                <div className="hmd-bottom">
                    了解惠民贷
                </div>
            </div>
        );
    }
}
// ========================================
export default HmdMain;